<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .slide{
            width: 600px;
            height: 400px;
            position: relative;
            margin: 100px auto;
        }
        .slide img{
            width: 100%;
            height: 100%;
        }
        .slide .prev,
        .slide .next{
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: gray;
            top: 50%;
            text-align: center;
            line-height: 40px;
            border-radius: 50%;
            transform: translateY(-20px);
            font-size: 20px;
            color: white;
        }
        .slide .prev{
            left: 10px;
        }
        .slide .next{
            right: 10px;
        }
        .slide .circles{
            position: absolute;
            bottom: 10px;
            width: 100px;
            height: 16px;
            left: 50%;
            /* background-color: gray; */
            transform: translateX(-50%);
        }
        .slide .circles span{  
            display: inline-block;
            height: 18px;
            width: 18px;
            background-color: #fff;
            border-radius: 50%;
            margin: 0 2px;
        }
        .slide .circles .active{
            background-color: #505CC9;
        }
    </style>
</head>
<body>
    <!-- 1. 轮播图容器 -->
    <div class="slide">
        <!-- 图片 -->
        <img src="images/one.webp" alt="">
        <!-- 上一张按钮 -->
        <div class="prev"><</div>
        <!-- 下一张按钮 -->
        <div class="next">></div>
        <!-- 小圆点 -->
        <div class="circles">
            <!-- <span class="active"></span>
            <span></span>
            <span></span>
            <span></span> -->
        </div>
    </div>
    <script>
        // 定义数组 保存所有图片的路径
        var arr = ['images/one.webp','images/two.webp','images/three.webp','images/four.webp'];
        // 获取轮播图容器
        var slide = document.querySelector('.slide');
        // 获取图片dom 元素
        var img = document.querySelector('img');

        // 获取上一张按钮元素 和 下一张按钮元素
        var prev = document.querySelector('.prev');
        var next = document.querySelector('.next');
        // 定义变量 保存默认显示的图片下标
        var index = 0;
        // 定义变量 保存 定时器标识;
        var timeId;
        // 开启定时器 更换不同图片
        autoPlay();
        // 获取小圆点大容器
        var circles = document.querySelector('.circles');

        // 给slide 添加鼠标移入和移出事件
        slide.addEventListener("mouseover",function(){
            clearInterval(timeId);
        });
        slide.addEventListener("mouseout",function(){
            // 开启自动轮播
            autoPlay();
        })
            //渲染小圆点
            render();

        //给上一张和下一张添加点击事件
        prev.addEventListener('click',function(){
            // 更改下标   --index 每次减去一张。 如果等于-1 arr.length-1。 不然还是等于--index
            // 这里减去负1 是因为减成-1之后不能再减了 这个时候 就要执行我下边写的话啦
            index = --index == -1 ? arr.length -1 :index;
            img.src = arr[index];
            //重新渲染小圆点
            render();
            console.log(index);
        })

        next.addEventListener('click',function(){
            index = ++index == arr.length ? 0 :index;
            img.src = arr[index];
            //重新渲染小圆点
            render();
        })


        // 封装轮播图渲染方法
        function autoPlay(){
            timeId =  setInterval(function() {
            // 更改下标   是否等于了arr的长度 注意要减1 因为长度是没有0 但是数组索引号从0开始; 长度4 索引号3
            index = index++ === arr.length-1 ? 0 : index;
            // 每隔一秒更换下一张图片路径
            img.src = arr[index];
            // 重新渲染小圆点 因为轮播图片index才会变 小圆点跟着一起变
           render();
        }, 1000);
        };

        // 封装小圆点的渲染  item 当前项 i 当前下标
        function render(){
         circles.innerHTML =arr.map(function(item,i){
        return`<span class=${index == i ? 'active':''}></span>`
            }).join('');
        }
    </script>
</body>
</html>